<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue的指令</title>

    
    <!---第一步导入需要的vue.js-->
    <script src="../js/vue.js"></script>
</head>
<body>


    <div id="root">
        常用指令 
                <div>
                    <!-- 内容      v-text  v-html     -->
                    使用v-text:<span v-text="msg" style="color: red;">  </span>
                    使用v-html:<span v-html="msg" style="color: red;">  </span>
                </div>
                <div>
                <!-- 条件指令  v-if   v-else   v-show   -->
                    性别：<span  v-if="sex=='男'">男</span>  
                          <span  v-else>女</span>
                </div>

                <div>
                    <!-- 循环指令  v-for  -->
                    <ul v-for="(item, itemIndex) in newsList" :key="itemIndex">
                        <li > 
                            <span v-text="item.title"></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                            发布时间：<span>{{item.createDate}}</span>
                        </li>
                    </ul>

                </div>
                 
                <div>
                    <!-- 双向绑定  v-model   只能绑定到表单标签  -->
                    <!-- <input type="text" v-model="something"> -->
                </div>

                <div>
                    <!-- 事件      v-on   -->

                    <a href="#" v-on:click="handleClick">单击</a>
                    <a href="#" @click="handleClick">单击二</a>
                </div>
                
                <div>
                    <!-- 属性      v-bind  -->
                    <!-- 循环指令  v-for  -->
                    <ul v-for="(item, itemIndex) in newsList" :key="itemIndex">
                        <li > 
                            <span v-text="item.title" :title="item.title" :aa="item.title"></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                            发布时间：<span>{{item.createDate}}</span>
                        </li>
                    </ul>

                </div>



                



                
           




    </div>
    
</body>

<script>

function handle(){}

    new Vue({
        el:"#root",
        data:{
            msg:"<a href='#'>v-text内容！</a>",
            sex:"男",
            newsList:[
                {title:"巴黎奥运会开幕式",createDate:"2024-07-27"},
                {title:"巴黎奥运会开幕式倒计时最后一天",createDate:"2024-07-26"},
                {title:"巴黎奥运会开幕式倒计时最后二天",createDate:"2024-07-25"},
            ]
        },
        methods: {
           
             handleClick(){alert("我点击了a标签")},
        },
    })


</script>

</html>